<template>
	<div>
		<h2>{{ title }}</h2>
        <button @click="bindUpdate">更新</button>
	</div>
</template>

<script setup>
import { ref,onMounted, onUpdated, onUnmounted } from 'vue'
//此位置写的代码对应 created生命周期
const title = ref('hello')

// 初始化响应式数据和method方法
console.log('创建生命周期 created');

const bindUpdate = ()=>{
    title.value = 'world'
}

/**
 * 1. mounted 将ref声明的响应式数据与模板进行渲染，挂载到页面
 */
onMounted(() => {
    console.log('挂载生命周期 mounted');
})

/**
 * updated 更新
 */
onUpdated(()=>{
    console.log('更新生命周期 updated ');
})

/**
 * 卸载
 */
onUnmounted(()=>{
    console.log('卸载生命周期 unmounted ');
})

</script>

<style lang="css" scoped></style>
